<template>
    <div class="user-tool-bar">
        <el-icon><el-icon-search /></el-icon>
        <Message />
        <router-link to="/">返回首页</router-link>
        <el-dropdown trigger="click" @command="handleCommand">
            <div class="user-avatar">
                <!-- <el-avatar :size="28" icon="el-icon-user-filled" /> -->
                <el-avatar :size="28" :src="DefaultAvatar" />
                <label>{{ user.name }}</label>
                <el-icon><el-icon-caret-bottom /></el-icon>
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="userinfo">帐号信息</el-dropdown-item>
                    <el-dropdown-item command="password">修改密码</el-dropdown-item>
                    <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup lang="ts">
import DefaultAvatar from "@/assets/default-avatar.png";
import { useUserStore } from "@/stores/user";

import Message from "./message.vue";

const user = useUserStore();

const handleCommand = (command: string) => {
    switch (command) {
        case "logout":
            user.logout();
            break;
    }
};
</script>

<style lang="scss" scoped>
.user-tool-bar {
    display: flex;
    align-items: center;
    gap: 32px;
    color: #fff;
    padding-right: 20px;
    a {
        color: #fff;
    }
    :deep(.el-icon) {
        font-size: 18px;
        cursor: pointer;
    }
    .user-avatar {
        display: flex;
        align-items: center;
        color: #fff;
        cursor: pointer;
        label {
            margin: 0 4px 0 8px;
        }
    }
}
</style>
